<template>
  <uni-popup ref="shortUnitRef" type="bottom" zindex>
    <view class="box-con padding">
      <view class="top-title">
        <view class="modalTitle pad_cl">儿童</view>
        <view class="pad_b48 padding-bottom-xs margin-top-sm text-c9 text-sm">请选择您随行的儿童人数</view>
        <view class="close-btn" @click="close"><text class="text-lg cuIcon-close closBtn"></text></view>
      </view>
      <view class="center-con flex justify-between">
        <view class="c-left flex flex-direction">
          <text class="text-df text-c6">儿童</text>
          <text class="text-sm text-c153 margin-top-xs">(12岁以下)不保证100%安排，请自行照看</text>
        </view>
        <view class="c-right">
          <uni-number-box class="numbx priceCommon" v-model="num" :min="0" :max="10":allowInput="true" margin="0 -7rpx" @changes="changeNum"  />
        </view>
      </view>
      <view class="f-btn" @click="sureBtn">
        <text>确定</text>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const shortUnitRef = ref(null)
  const num = ref(1)
  const stopPrevent = () => {}
  
  const open = () => {
    shortUnitRef.value.open()
  }
  
  const close = () => {
    shortUnitRef.value.close()
  }
  
  const changeNum = (e) => {
    console.log(e)
  }
  
  const sureBtn = () => {
    close()
    emit('confirm',num.value)
  }
  
  defineExpose({ open, close })
  
</script>

<style scoped lang="scss">
  .box-con {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    min-height: 502rpx;
    max-height: 96vh;
    position: relative;
    .modalTitle {
      font-size: 36rpx;
      font-weight: bold;
    }
    
    .close-btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
    }
    .center-con{
      margin-top: 100rpx;
    }
  }
  .text-c153{
    color: rgba(153, 153, 153, 0.70);
  }
  .f-btn{
    width: 654rpx;
    padding: 16px 32px;
    border-radius: 100px;
    background: #56BF7A;
    color: #fff;
    font-weight: 400;
    text-align: center;
    margin: 60rpx auto 0;
  }
</style>